<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ViewTransition测试1</title>
    <style>
        .box {
            border: 1px solid #000;
            display: flex;
            flex-wrap: wrap;
            width: 500px;
            view-transition-name: box;

        }


        .box.test {
            display: grid;
            grid-template-columns: 1fr;
            width: fit-content;


            .last{
                background: blue;
            }
        }


        .item {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px;
            /* view-transition-name: var(--name); */
        }

        ::view-transition-old(box){
            display: none;
            /* animation-duration: 50s; */
        }

        ::view-transition-new(root),
        ::view-transition-old(root) {
            animation: none;
            /* animation-duration: 50s; */
        }
        ::view-transition-group(*) {
            /* animation: none; */
            animation-duration: 5s;
        }
    </style>

    <script>
        function change() {

            document.startViewTransition(() => {

                const box = document.getElementById('box');
                box.classList.toggle('test');

            });

        }


    </script>

<body>

    <div id="box" class="box" onclick="change()">
        <div class="item" style="--name: i1">1</div>
        <div class="item" style="--name: i2"></div>
        <div class="item" style="--name: i3"></div>
        <div class="item" style="--name: i4"></div>
        <div class="item" style="--name: i5"></div>
        <div class="item" style="--name: i6"></div>
        <div class="item" style="--name: i7"></div>
        <div class="item" style="--name: i8"></div>
        <div class="item" style="--name: i9"></div>
        <div class="item" style="--name: i10"></div>
        <div class="item" style="--name: i11"></div>
        <div class="item" style="--name: i12"></div>
        <div class="item" style="--name: i13"></div>
        <div class="item" style="--name: i14"></div>
        <div class="item" style="--name: i15"></div>
    </div>


</body>

</html>